{% set banner = "/img/default-banner.jpg" %}
{% if page.extra.image is defined %}
  {% set banner = page.path ~ page.extra.image %}
{% endif %}

<div class="flex flex-col rounded-md shadow-md overflow-hidden">
  <div class="flex-shrink-0">
    <a href="{{ page.permalink }}" aria-label="{{ page.title | default(value=res.empty_page_title) }}">
      <img class="h-48 w-full object-cover" src="{{ banner }}" alt="{{ page.title | default(value=res.empty_page_title) }}" />
    </a>
  </div>
  <div class="flex-1 bg-white p-6 flex flex-col justify-between">
    <div class="flex-1">
      {% include "partials/tags.html" %}
      <a href="{{ page.permalink }}" class="block">
        <h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
          {{ page.title | default(value=res.empty_page_title) }}
        </h3>
      </a>
      <p class="mt-3 text-base leading-6 text-gray-500">
        {{ page.description | default(value=res.empty_page_description) }}
      </p>
    </div>
    <div class="mt-6 flex items-center">
      <div>
        <div class="flex text-sm leading-5 text-gray-500">
          <time datetime="{{ page.date | date(format='%Y-%m-%d') }}">
            {{ page.date | date(locale=date_locale, format=date_format) }}
          </time>
          <span class="mx-1">
            &middot;
          </span>
          <span>
            {{ page.reading_time | num_format(locale=locale) }} {{ page.reading_time | pluralize(singular=res.minutes.one, plural=res.minutes.other) }} {{ res.reading_time }}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
